<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.6.min.js"></script>
    <script src="./lib/template-web.js"></script>
</head>

<body>
    <div id="container"></div>
    <!-- 2.定义模板 -->
    <!-- 模板的html结构，必须定义在script中 -->
    <script type="text/html" id="tpl-user">
            <h3>{{regTime | dateFormat}}</h3>
    </script>

    <script>
        //定义处理时间的过滤器
        template.defaults.imports.dateFormat = function (date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();

            return y + '-' + m + '-' + d;
        }

        //3.定义数据
        var data = {
            regTime: new Date()
        };
        //4.调用templa函数
        var htmls = template('tpl-user', data);
        console.log(htmls);
        //5.渲染html结构
        $('#container').html(htmls);
    </script>
</body>

</html>